<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奥莱购-登录页</title>
    <script src="./js/jquery.1.11.3.js"></script>
    <!-- <script src="../js/bootstrap.min.js"></script> -->
    <!-- <link rel="stylesheet" href="../css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/login.css">
    <script src="./js/axios.js"></script>
    <script src="./js/cookie.js"></script>
</head>

<body>
    <div class="login_top  clean">
        <div class="logo">
            <a href="index.html"><img src="../img/logo.png" alt=""></a>
        </div>
        <div class="days7">
            <ul>
                <li>
                    <div class="days_lit days_lit1 "></div>
                    <div class="days_txt">
                        <div class="days_red">100%</div>
                        <div class="days_black">全场正品保证</div>
                    </div>
                </li>
                <li>
                    <div class="days_lit days_lit2"></div>
                    <div class="days_txt">
                        <div class="days_red">SALE</div>
                        <div class="days_black">每天低价特卖</div>
                    </div>
                </li>
                <li>
                    <div class="days_lit days_lit3"></div>
                    <div class="days_txt">
                        <div class="days_red">7DAYS</div>
                        <div class="days_black">七天无理由退货</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="login_body clean">
        <div class="body_pic">
            <a href="index.html"><img src="../img/reg_big.jpg" alt=""></a>
        </div>
        <div class="body_reg">
            <ul>
                <li>
                    <a href="registration.html">立即注册</a>
                </li>
                <li>
                    <input type="text" placeholder="请输入您的账户名" id="user_id" value="zqszqszqs">
                    <div>请输入您的手机号</div>
                </li>
                <li>
                    <input type="password" placeholder="请输入您的密码" id="password_1" value="zqszqszqs">
                    <div>请输入您的密码</div>
                </li>
                <li>
                    <input type="checkbox" id="rember_pw">
                    <span>记住密码</span><a href="">忘记密码?</a>
                </li>
                <li>
                    <input type="button" value="登录" id="btn_login">
                    <div>请输入您的账户密码</div>
                </li>
                <li>
                    <span>无需注册，直接登陆</span>
                </li>
                <li>
                    <a href=""><span>QQ</span></a>
                    <a href="" id="wechat"><span>微信</span></a>
                </li>

            </ul>
        </div>
    </div>
    <div class="login_bottom">
        <div class="links">
            <ul>
                <li><a href="">关于奥莱购</a></li>
                <li>|</li>
                <li><a href="">联系我们</a></li>
                <li>|</li>
                <li><a href="">诚聘英才</a></li>
                <li>|</li>
                <li><a href="">商务合作</a></li>
                <li>|</li>
                <li><a href="">友情链接</a></li>
                <li>|</li>
                <li><a href="">华南城网</a></li>
                <li>|</li>
                <li><a href="">华盛Outlets</a></li>
            </ul>
        </div>
        <div class="copyright_txt">
            <p>Copyright © 2013-2016 深圳华盛电子商务有限公司 粤ICP备16081451-1号 All Right</p>
            <p>深圳市龙岗区平湖华南城1号交易广场4楼奥莱购（深圳华盛电子商务有限公司</p>
        </div>
        <div class="other">
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </div>
    </div>
</body>
<script>
    // $(function () {

    //     //验证账号格式-start
    //     let user_id_bool = true;
    //     // $("#user_id").bind("input propertychange", function (event) {
    //     //     var ck_user_id = /^1\d{10}$/;

    //     //     if ($("#user_id").val()) {
    //     //         if (ck_user_id.test($("#user_id").val())) {
    //     //             $("#user_id").next().css({
    //     //                 "opacity": "1",
    //     //                 "color": "green"
    //     //             })
    //     //             $("#user_id").next().text("格式正确")
    //     //             user_id_bool = true
    //     //         } else {
    //     //             $("#user_id").next().css({
    //     //                 "opacity": "1",
    //     //                 "color": "red"
    //     //             })
    //     //             $("#user_id").next().text("手机号码格式不正确")
    //     //         }
    //     //     } else {
    //     //         $("#user_id").next().css({
    //     //             "opacity": "0",
    //     //         })
    //     //     }

    //     // });
    //     //验证账号格式-end



    //     //注册提交-start
    //     $("#btn_login").click(function () {
    //         if (user_id_bool) {
    //             axios.get(`http://localhost:3000/user?id=${$("#user_id").val()}`).then(res => {
    //                 if (res.data.length == 1) {
    //                     if (res.data[0].password == $("#password_1").val() && res.data.length ==
    //                         1) {
    //                         console.log("登陆成功");
    //                         set_ce();
    //                         $("#btn_login").attr("value", "登陆成功..正在跳转")
    //                         timer = setTimeout(function () {
    //                             $(location).attr('href', "index.html");
    //                             console.log("666");
    //                         }, 2000);
    //                     } else {
    //                         $("#password_1").next().text("登录失败，请检查您的账户密码")
    //                         $("#password_1").next().css({
    //                             "opacity": "1",
    //                             "color": "red"
    //                         })
    //                     }
    //                 } else {
    //                     $("#password_1").next().text("账户不存在，请注册")
    //                     $("#password_1").next().css({
    //                         "opacity": "1",
    //                         "color": "red"
    //                     })
    //                 }
    //             }).catch(function (e) {
    //                 console.log(e);
    //             });

    //         } else {
    //             $("#password_1").next().text("请正确填写用户信息")
    //             $("#password_1").next().css({
    //                 "opacity": "1",
    //                 "color": "red"
    //             })
    //         }
    //     })
    //     //注册提交-end


    //     //登陆成功设置cookie-start
    //     function set_ce() {
    //         console.log(rember_pw);
    //         if ($("#rember_pw").is(':checked')) {
    //             setCookie("user_id", $("#user_id").val(), 7);
    //             setCookie("user_psd", $("#password_1").val(), 7);
    //             console.log("aa");
    //         } else {
    //             setCookie("user_id", $("#user_id").val());
    //             setCookie("user_psd", $("#password_1").val());
    //             console.log("bb");
    //         }
    //     }
    //     //登陆成功设置cookie-end


    //     //如果之前存过，取出来放到文本框里-start
    //     if (getCookie("user_id")) {
    //         user_id_bool = true
    //         $("#user_id").val(getCookie("user_id"));
    //         $("#password_1").val(getCookie("user_psd"));
    //         $("#rember_pw").prop("checked", true);
    //     }
    //     //-end
    // })

    $(function () {
        //如果之前存过，取出来放到文本框里
        if (getCookie("username")) {
            $("#user_id").val(getCookie("username"));
            $("#password_1").val(getCookie("password"));
            $("#rember_pw").prop("checked", true);
        }
        //判断登录是否成功
        $("#btn_login").click(function () {
            axios.get(
                `http://jx.xuzhixiang.top/ap/api/login.php?username=${$("#user_id").val()}&password=${$("#password_1").val()}`
            ).then(res => {
                console.log(res.data);
                if (res.data.code == 1) {
                    console.log("登陆成功");
                    let uid = res.data.data.id
                    let token = res.data.data.token
                    console.log(uid, token);
                    if ($("#rember_pw").is(':checked')) {
                        setCookie("username", $("#user_id").val(), 7);
                        setCookie("password", $("#password_1").val(), 7);
                        setCookie("uid", uid, 7);
                        setCookie("token", token, 7);
                    } else {
                        setCookie("username", $("#user_id").val());
                        setCookie("password", $("#password_1").val());
                        setCookie("uid", uid);
                        setCookie("token", token);
                    }
                    $("#btn_login").attr("value", "登陆成功..正在跳转")
                    timer = setTimeout(function () {
                        $(location).attr('href', "index.html");
                    }, 500);
                } else {
                    $("#password_1").next().text("登录失败，请检查您的账户密码")
                    $("#password_1").next().css({
                        "opacity": "1",
                        "color": "red"
                    })
                }


            })
        })
    })
</script>

</html>